Standard  Screen  Patterns  v3.0  January  17,  2009 
by  Theresa  Neil 


Patterns  are  broadly  applicable  solutions  for  general  problems.  Contrast  this  with: 
o     Guidelines:  specific  rules 

o     Principles:  underlying  conceptual  framework  for  guidelines 

Patterns  aid  in  the  application  of  abstract  solutions  to  concrete  problems.  Think  of  them  as 
solution  templates.  Standard  screen  patterns  for  enterprise  software  and  productivity  web 
applications: 


Master/  Detail 


Form 


Wizard 


i  i 


Column  Browse 


Search/  Results 


Palette/  Canvas 


Dashboard 


Question  &  Answer 


Parallel 


Filter 


Soreadsheet 


Interactive 


Blan< 


Master/Detail 


Master/Detail  screen  pattern  can  be  vertical 
or  horizontal.  Ideal  for  creating  an  efficient 
user  experience  by  allowing  the  user  to  stay 
in  the  same  screen  while  navigating  items. 

The  master  pane  is  typically  comprised  of: 
o    List  on  left 
o    Tree  on  left 
o    Accordion  on  left 
o    Table  on  left 

The  detail  pane  can  include  a: 


o 
o 
o 
o 
o 
o 


Text  description 

Thumbnails 

Table 

List 

Graphs  or  charts 
A  form 


Best  practices 

Include  quantity  in  the  master  pane, 
ex.  Inbox  (34). 

Use  standard  list,  tree  or  table  actions  if 
using  these  components  on  the  left  (add, 
remove,  rename,  drag/drop...). 

Don't  use  tabs  in  the  master  or  detail  pane. 


File    Edit    View    Favorites    Tools  Help 

©Back       Q      &    psearch  I  ^  Folders  I  ^ 


Address  |  j  My  Computer 


P  Desktop 
+  _J  My  Documents 

I       3'A  Floppy  (A:) 
B  m  Local  Disk(C) 
B       Local  Disk  (DO 
i  J>  DVD-RW  Drive  (Ei) 
i  \y  Control  Panel 

9  BisonCam,  USB2.0 
+  ui  Shared  Documents 
i  u5  Alan's  Documents 
+  _)  Vallis's  Documents 
t  _j  Guest's  Documents 
ft  *j  My  Network  Places 

Si  Norton  Protected  Recycle  Bin 


P 


Shared  Documents 


Vallis's  Documents 


Alan's  Documents 


Guest's  Documents 


Hard  Disk  Drives 


Devices  with  Removable  Storage 

3'A  Floppy  (A:) 


t^^j)  Local  Disk  (D:) 


(^)    DVD-RW  Drive  (Ei) 


Scanners  and  Cameras 


BisonCam,  USB2.0 


Tree  on  left-  Windows  Explorer 


Favorite  Folders 

Arranged  By:  Date                                       Newest  on  top 

Inbox  (1) 

Unread  Mad 

1  Last  Month 

ForFofowUp 
.  j  Sent  Items 

■  IntelliAdmin  Support                                 9/3/2006  H 

test 

All  Mail  Folders 

-I  ij'  Personal  Folders 

±,  Deleted  Items  (2 
i^j  Drafts 
l_J  Inbox  (1) 
.  q  Junk  E-mail 

V 

J  Mail 

j  1  Calendar 

S  :|  Contacts 

Tasks 

» 

Accordion  on  left-  Outlook 
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Master/Detail  (cont.) 


Vertical  Table  on  left-  Quick  Books 


List  on  left,  graphs  on  right-  Trail 
Runner 


CONTACTS 

so 

Search:  | 

I  q  I    first  name  Kent 

Sort:  A  |  Last  Name      ]  *  | 

1  1     last  name  Libbey 

Antony  Campitelli 

antony@laszlomail.com 

title 
company 

O    Kant  Libbey 

kent@laszlomail.com 

Email 

Laszlo  Team 

laszlomailfeedback@laszlosystems.com 

primary  kent@laszlomail.com 
work 

David  Temkin 

david@laszlomail.com 

Phone 

home 

cell 

Address 

home 

work 

IM 

IM 

Personal 

+  0  |+  -|,.y|  Delete  | 

|  Cancel  J  Save 

A 

Master  list  on  left,  editable  form  on 
right-  Laszlo  WebTop  beta 
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Master/Detail  (cont.) 


L  I 

Canvases  Out 

ne                  Tools                   Front    Back  Lock 

IP                      1)  o 

Ungroup                                                                Stencils  Inspect 

Canvase 

TOC 

LZ          EZ         z  : 

200' 1300 U60 1 560 l6O0'  ' 

n  1^ 


Layer  1 

Master  2 
Master  Detail  1 


•IT 


LD' 


Master  Detail  2 


Master/Detail  screen  oattern  can  be 
vertical  or  horizontal.  Ideal  'or  creating 
an  efficient  user  experience  by  allowing 
the  user  to  stay  in  the  same  screen  while 
navigating  items. 

The  master  pane  is  tyoically  comprised 


The  detail  Dane  can  inch 
0    Text  description 
0  Thumbnails 
o  Table 


Tree  on  left-  Windov/s  Explorer 


Vertical 


,Q3  153  1  i'  ^  - 


Thumbnails  on  left-  selected  screens 
details  on  right-  OmniGraffle 


Horizontal 


Subject;  Amazon  Customers  Vc 


:o30%  on  New  Textl 


Products,  Ridiculous  Prices 


March  13,  2008 
December  23,  2007 
December  6.  2007 
December  13,  2007 
April  7,  2008 
January  8,  2008 
March  10,  2008 
December  10,  2007 


amazoncom 


Amazon  Customers  Vote 

6  rounds.  18  ridiculous  deals. 
Cast  your  votes  now  and  get  six  chances  to  wrap  up  this  season's 

must-have  gifts  at  unbelievable  orices 


Table  on  top-  Mac  Mail 


Horizontal  layout  is  a  good  choice  when 
the  user  needs  to  see  more  information  in 
the  master  list  than  just  a  few  identifiers, 
ex.  subject  or  description 

Best  Practices 

Don't  use  the  bottom  pane  as  an 
extended  area  for  editing  table  fields.  Use 
the  Spreadsheet  pattern  or  a  light  weight 
layer  for  editing. 


Firefox  Start 

Google 

(C009l.Se.rch) 

Create  your  own  Firefox  t-shirt  or  browse  the  user-created  designs  at  the  new  Mozilla 
Community  Store.  Plus,  get  official  gear  at  the  Mozilla  Store. 

Atu-f.':-  > 


Console     HTML     CSS     Script     DOM  Ncl 
font-family:  oriel, sans-serif ; 

} 

body  { 

}         9         "  " 

Objects  on  top,  hover  to  see  details 
below-  Firebug 
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Master/Detail  (cont.) 


Horizontal 


L+J  |o|„i-.|  [XJ 


Thumbnails  on  top,  selected 
thumbnail's  detail  below-  iPhoto 


i  us  i 


•1   -J  -J  1  L,    J    /\  =i  | 

w — 


■ft  ft-  ^1     J-  gti  01     J-  fta  gi>| 


tin*-. 


-la  I 


i: 


*        *  o-  *Q 

i — »  — a 


Diagram  on  top,  selected  object's 
properties  below-  Lego  Mindstorm 


gowebtopbeta 


M  Check  Mail    ^  New    £  Reply         ""P1* A"   fitt  Forward           X  J 

[b^s 

goWebtop  1  Introducing  Calendar!                                                                                           5/6/1 1 

-   Inbox  (1) 

•        goWebtop  goWebtop  system  maintenance  May  5,  2008 

5/4,1 

a  Drafts 
■3  Start 
L#Junk 

goWebtop  7  Important  Notice  Regarding  Your  Laszlo  Mail  Account  -  here  comes  goWebtop! 
Laszlo  Tean  Tell  us  what  vou  think! 

11/2  S 
10/2  5 
1/20  0 

g  Trash 

m  Subject:  Introducing  Calendar!                                                                                Add  Contact 

Option.  M|  J 

Read  more  about  Calendar  on  our  bloo. 
webmaster@laszlosystems.com. 

Thank  you, 

The  goWebtop  Team 

List  of  messages  on  top,  selected 
message's  details  below-  goWebTop 
beta  by  Laszlo 
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Browse 


t> 


Vertical 


tit    Edit    y«v«    So    loots    Vetera  Udp 

>lNew  -  i^jjX  Reply  ^|  Reply  to  All  ^Fofwwd  %  f  £r}  ^ 
Mail  Inbox 


try 


V  :«n-s 
/i  Drjfts 

lr*o»  .  : 

j«jton  if 


Marc-Alam  Steirtemarvn 


M ACS  i  ntrrpri«-  C  lient  Support    Ruihuj  ) 

MACS  Enterpr  se  C l*nt  Support  Ruihu*  Ji 
MACS  Enterp- se  C  «nt  Support      Ruihua  * 


MACS  Enterprise  Cent  Support 
■Qr-c^r-  ccsoftcom 


en  dntl  Vendor)  Ruihua  Ji 


ie  Windows  SideShow  enabled 


It  includes  a  Windows  "SideShow"  Gadget  device  that 
connects  to  your  laptop  via  Bluetooth  and  caches  data 
while  the  laptop  is  turned  off.  This  allows  you  to 
browse  images,  view  email,  calendar,  contacts,  read 
RSS  etc.  without  removing  the  laptop  from  the  bag! 


Accordion  with  two  additional  fixed 
vertical  columns-  Outlook 


The  Browse  screen  pattern  can  be  vertical 
or  horizontal.  Ideal  for  creating  an  custom 
user  experience  by  allowing  the  user  to 
start  from  various  entry  points  and 
navigate  to  the  item(s)  they  are  interested 
in. 

Vertical  variations  typically  offer  a: 
o    List  on  left 
o    Divided  list  on  left 
o    Tree  on  left 
o    Accordion  on  left 

Typically  3-4  columns.  Should  always 
include  a  Search  at  the  global  level. 

Best  practices 

Only  show  items  in  the  first  column  that 
have  children. 

Include  quantity  with  the  labels  if  it 
provides  value  for  browsing. 

Many  products  that  use  this  pattern 
provide  an  alternate  interface  for 
navigating,  like  a  tree,  thumbnail  or  table 
view. 


0  ^  rs 

1  «  ►  II  88  s'.m 

^theresaneil  ! 
|jjr]jj  Movies 

£  MUSIC 

,  Parallels 
W-  Photo  Booth 

.     QuickBooks  NUE 
<J  QuickTime  Player 
|  :  Readiris  7  Pro 
Sa'a- 

,  1  smartevs-  sx-4_0_8 

■  Activity  Monitor 
Acooe  Installers 

Adobe  Utilities 

H  Audio  MIDI  Setup 

v  Bluetooth  File  Exchange 

Adobe  UpdaterS            r-  yPreview: 
P  ExtendScript  Toolkit  2 

Oj  Pictures 
Documents 

Desktop 

Stickles 
0  Stufflt  10.0 

System  Preferences 
TDMacOSX 
rextEdit 
3  Thunderbird 
a  Thunderbi   .0.0.9  dmg 

>s  ColorSync  Utility 

■  Consc  e 

*  DigitalColor  Meter 

M  CrSaDUt""V 

Utilities 
VPNCIient 
I  Windows  Media  Installer 
,    Windows  Media  Player  i 

x  MacBook  P  re  Update 

Unlimited  vertical  columns-  Apple 


fro,lnflJlslt„r 

|    Others  SSTi.- 

WiTunes 


Four  fixed  vertical  columns-  Otherlnbox 
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Browse  (cont.) 


V 

Horizontal 


Refine  across  the  three  columns- 
iTunes 


The  horizontal  layout  is  a  good  choice 
when  there  are  few  items  in  each  refine 
column  (less  than  20)  and  the  detail  pane 
has  tabular  or  graphical  content. 


Same  as  iTunes,  but  each  column 
can  be  customized-  Songbird 


FiveRuns  Corporation 

Suaaestion  or  Problem? 

System  Browser 

Filter 

©  Systems  (6) 
©Smart  Croups  (2) 

©dbl                                          |f|©  Linux 
©db2.fiveruns.com                          ||J  ©  MySQL 

Four  columns  for  browsing  from 
different  starting  points-  FiveRuns 
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Search/Results 


Simple 


*  Theresa  N< 
Search,  add,  or 

•  Labels 


Aaron,  me.  Bill  (21) 


1  -  20  of  60  Older  ■  C 


Bonus  Holiday  Listen  -  Members  Only  ■  This  e-mail  was  sent  to  you  I 
Get  Extra  Credits  -  As  Low  As  $11 .96!  -  This  e-mail  was  sent  to  you  I 


Reset  your  audible.com  password  -  Dear  Audible  customer,  We  are : 
Pre-order  Malcolm  Gladwell's  next  best  seller  -  This  e-mail  was  sent 
Your  Weekly  Financial  Summary  from  Mint.com  - 10/24/2008  -  mint.c 
Reset  your  audible.com  password  -  Dear  Audible  customer,  We  are  I 
Updated  Account  Information  Needed  This  e-mail  was  sent  to  you  t 
Classics  Sale  -  50%  Off  1 50  Literary  Masterpieces  -  This  e-mail  was 

Dueling  Narrators  -  The  Winners  You  Chose  -  This  e-mail  was  sent  t( 
Special  Edition:  The  Best  of  2008  (So  Far)  -  This  e-mail  was  sent  to  | 
Important  Information  About  Your  Audible  Membership  -  Dear  There; 
Anne  McCaffrey's  Dragonriders  of  Pern  -  This  e-mail  was  sent  to  you 
Fwd:  Theresa  Neil  Author  Bio  -  Oh-  please  give  her  a  hug  from  me.  I 
Reset  your  audible.com  password  -  Dear  Audible  customer,  We  are  ! 
Get  3  Audiobooks  For  2  Credits  -  This  e-mail  was  sent  to  you  by  aud 
t  Invitation  -  I'm  looking  for  some  more  "timeless"  examples.  I'll  plug  the  f 
Terry  Goodkind's  Sword  of  Truth  Seriei 


;  -  Now  on  Sale!  -Thtol 


May  26 
May  13 


Simple  search,  default  sort  by  date- 
Gmail 


The  Search  screen  pattern  can  range 
from  very  simple  to  quite  advanced.  Ideal 
for  creating  an  efficient  user  experience 
by  allowing  the  user  to  navigate  directly  to 
an  item  or  set  of  items  meeting  specific 
criteria. 

Results  are  typically  displayed  as  a: 
o  List 

o    Table  (editable  or  read-only) 
o  Thumbnails 

o  Map 

Search  will  return  the  data  either: 
o    Sorted  by  default 
o    Grouped  by  default 

Additional  search  criteria/refine 
functionality  is  typically  offered  after  the 
initial  search  results  are  displayed. 

Best  practices 

Offer  a  single  search  field  that,  by  default, 
includes  "key  words". 

Allow  an  easy  (one-click)  way  to  clear  the 
search  field. 

Show  the  results  in  the  same  screen. 


Spotlight:  evaluation 

958  Result 

devaluation 

—  PPSS_JXStrategy_120808.pdf                                                                                              Yesterday         4:19  PM 
~  DO_TermDeal_Oec2.graffle                                                                                         Yesterday        4 16  PM 

|  Word  Wo 

rk  rile  A_1940209107                                                                                            November  28     5:49  PM 

Pre-grouped  search  results-  Mac 
Spotlight 

'audible'  Total  Amount         $161.75  Search  Results  11 


I  Q,  audlble| 


1  Description 

Category 

Amount 

|Audible.com 

1  Books 

BT|  -$14.95 

NOV  18 

Audible.com 

■MliiUl^BP  Books 

-S14.95 

□ 

OCT  18 

Audible.com 

Books 

-$14.95 

□ 

SEP  29 

Audible.com 

Books 

-J14.95 

□ 

AUG  15 

Audible.com 

Books 

-$14.95 

JUN20 

Audible.com 

Books 

-$14.95 

□ 

MAY  18 

Audible.com 

Books 

-$14.95 

APR  18 

Audible.com 

-$14.95 

□ 

MAR  18 

Audible.com 

Books 

-$14.95 

□ 

Audible.com 

Books 

-$12.25 

□ 

FEB  18 

Audible.com 

Books 

-$14.95 

Showing  2  5  50  100  transactions 

Export  all  11  transactions 


Simple  search,  tabular  results-  Mint 
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Search/Results  (cont.) 


Advanced 


Advanced  search  is  typically  required  in 
enterprise  applications. 

Advanced  search  usually  includes  the 
functionality  to  do  one  or  more  of  these: 

o    Specify  more  criteria 

o    Build  a  custom  search  (and  save  it) 

o    Scope  the  search 

o    Save  the  search  criteria 

o    Save  the  search  results 

o  Build  a  list  from  multiple  search 
results 

Best  practices 

Provide  advanced  search  criteria  in  the 
same  screen,  not  a  pop-up  or  separate 
screen. 

Don't  force  the  user  to  pre-scope  the 
search,  but  offer  it  as  an  optional  feature  if 
it's  a  requirement,  ideally  a  drop  down  in 
the  search  field  (like  iTunes)  instead  of  a 
listbox  next  to  the  field. 


$439,900  5406  Roosevelt  Ave 
^     Austin,  TX  78756 

Virtual  Tour    Property  type:  Single  Family  I 


See  ALL  Austin  Homes 
Search  by  Austin 
Subdivision  Mansions, 
Condos,  Lofts.  DEALS 


Simple  search  with  advanced  criteria 
in  collapsible  panel-  Roost 


m  & 


Ui  Li 


d  Selection  48  n  pi.pjd      Add  Selection  48  n 


d  Selection  48  n  t  ump  Add  Task  48  d  g  q  I 


Advanced  search  by  adding  criteria 
Mac  OSX 


Scope  search-  iTunes 
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Search/Results  (cont.) 


i=  Adhoc  Requests  Found 

«ll  «J|j8|M#tll  V|E]Bj 


  Saved  search  criteria-  Sabre 

Advanced 


Home   My  Library   Wish  List  Member  Audio  AudibleKids                                 1  *C,i„     Nenenand  (Unabrdged) 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^1                   American  Gods  (Unabridged) 

( IV  Keyword  ^ 

Search  Results  for  Keywords:  Malcom  Gladwell 

Author :  Malcolm  Gladwell 
Narrator :  Malcolm  Gladwell 

1 -10  of  37  results                                                                 12      3  4 

Refine  Search  Results 

PROGRAM  FORMAT 

Unabridged  (6) 
Abridged  (10) 
Ohginal  (3) 

PROGRAM  TYPE 

Audiobook  (8) 

Radio/TV  (7) 

CATEGORIES 

Arts  &  Entertainment  (3) 
Business  (S) 
Live  Events  (2) 
Newspapers  &  Magazines 
(") 

Nonfiction  ($) 
Radio  &  TV  (5) 
Science  &  Technology  (4) 
Self  Development  (2) 

PUBLICATION  DATE 

Sort  By    Bestsellers               T)a                            Show     10  T)  Results  Per  Page 

blink 

Add  to  Wish  List] 

AUDIOBOOK 

Blink:  The  Power  of  Thinkina  Without 
Thinking 

UNABRIDGED 

By  Malcolm  Gladwell 

Narrated  by  Malcolm  Gladwell 

Rating:  *****  4.09  (3021  Ratings) 

Release  Date:  04-05-05 
Regular  Price:  (MM 

n.  • 

The  TiDDina  Point:  How  Little  Thina« 
Can  Make  a  Bio.  Difference 

ABRIDGED 

Bv  Malcolm  Gladwell 

Narrated  bv  Malcolm  Gladwell 

Rating:  *  *  *  *  &  4.07  (1 295  Ratings) 

Release  Date:  04-11-05 

Search  and  save  one  or  more  of  the 
results- Audible 


Search  and  build  a  list  from  results 
(of  multiple  searches)-Songza 
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Refine  Dataset 


Vertical 


▼  Stops 

5*  rors-.op 


Mon  6:00a  -  9:00p 

▼  Airlines 

g  Alaska  Airlines 
M  American  Airlines 
0  Delta 
g  Northwest 
g  United 
g  US  Airways 
g  Virgin  America 
0  Multiple  Airlines 

See  airline  fees  n 


www.FlightNetwork.com/New-York 


Showing  Roundtrips  or  Select  Departures  First 
671  of  671  shown 

Price*  #  Airline  Takeoff  Landin 


Stops  (Duration) 

1(8h  01m) 
1(14h  16m) 
details  g  b  C  0 
(5D 


v    US  Airways  / 
•y™--*    ■■    Multiple  Airlines 

LAX   7:25p  JFK 

6:26a  1(8h01m) 

JFK    8:55p  LAX 

8:11a  1(14h16m) 

details  08v6 

Book  on:  orbitz.com:  S425  che 

aotickets.com:  S430 

(EM) 

$425 


Multiple  Airlines 


LAX   5:30p     JFK  6:26a 


JFK  8:55p  LAX  8  11 
cheaptickets.com:  S425 


US  Airways  /  LAX   5:30p     JFK  6:26a 

Multiple  Airlines      JFK    8:55p     LAX  8:11a 


Book  on :  orbitz.com:  S425    cheaptickets.com:  S4 30 


ffyOr  kl  u.  LAX   4:25p     JFK  6:26a 

$425  X   Multiple  Airlines      JR<   ^     ^  — 


1  (9h  56m) 
1(14h  16m) 

s  ©  a  0 
(HD 

1  (9h  56m) 
1(14h  16m) 
s  §  e  <?  0 


1(11h01m) 
1(14h  16m) 

S  H  R  O  ft 


Live  filter-  Kayak 


The  Refine  Dataset  screen  pattern  can  be 
vertical  or  horizontal.  Ideal  for  creating  an 
efficient  user  experience  by  allowing  the 
user  to  refine  a  set  of  known  data,  or 
further  refine  search  results. 

Refine  panels  typically  utilize  one  or  more 
of  the  following  components: 

o    text  field 

o  slider 

o  checkboxes 

o  listbox 

o    alternate  listbox  Ul 
o    date  range  picker 


Best  practices 

Ideally  the  filters  dynamically  refine  the 
result  set  (no  submit  button).  An  inactivity 
timer  can  be  used. 

"Clear  all  filters"  button  should  be 
prominent. 

Multiple  collapsible  panels  on  the  left 
should  be  avoided. 

http://looksgoodworkswell.  blogspot.  com/ 
2008/02/pattern-ref ining-search.html 


You  searched  for 

164  CarS  fOUnd                                                    Create  an  alert       New  Search       Save  Search 

View  as   List     Photos                                                                                 1  2  3  4  5 

Refine  your  search  by 

j^^^^    New:  Refine  your  search  by  MPG 

Keyword     |mini  cooper 

HH|    2007  MINI  Cooper  S                                     16K      $28,998  Comparer 

Refine  further 

,    2005  MINI  Cooper  S                                  34K     $21,599  Comparer 

z  0 

3BW 

Submit  to  refine  search-  Carmax 


Computers  &  Networking  I 


Filtering  by  category-  eBay 
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Refine  Dataset  (cont.) 


□ 
□ 
□ 


Horizontal 


□ 
□ 
□ 


_  Amazon.com 
H  Amazon.com 


im  Account  -  Thanks  for  visiling  Amazon.cc 
'High  Performance  Web  Sites:  Essential  Kr 
at  Endless.com,  Plus  Get  Free  Overnight  Shipping  A 
:   Save  34%  at  Amazon.com  on  "Deleting  the  State:  An  Argument  About 
:   New  in  Grocery:  Save  up  to  $20  at  Amazon.com  •  Amazon.com  Grocer 
Save  an  Additional  5%  on  Pre-order  Picks  in  Literature  &  Fiction  at  Am. 
Amazon.com  Automotive:  Save  Big  in  the  Friday  Sale  -  Amazon.com  A 
:    Great  savings  from  Amazon's  Warehouse  Deals  -  Amazon.com  Dear  A 
Discover  the  History  of  Your  Last  Name  at  Amazon.com  -  Amazon 


Refine  options  above,  results  below- 
Gmail 


The  horizontal  layout  provides  the 
advantage  of  more  horizontal  space  for 
wide  result  sets.  This  works  nicely  for 
expanding  an  advanced  search  below  a 
simple  search  field,  yet  above  the  result 
set. 

Roost  and  Omio  are  experimenting  with 
tabbed  sections  for  different  types  of 
criteria.  However,  this  makes  it  impossible 
to  see  all  the  filters  currently  applied. 

Best  practices 

If  the  user  has  refined  the  data  to  the  point 
of  no  matching  results,  clearly  provide 
feedback  and  recovery  options. 


Don't  provide  a  feature  for  saving  a  set  of 
refinement  filters.  This  can  be  taken  care 
of  with  the  Search  (advanced  search) 
pattern. 


Networks  Brands  Tariffs  Features  Styles  Offers  Colour 

Monthly  Cost  Inclusive  Texts  Monthly  Minutes 


Sim  Only 


98815 

Show  [To    3    Sort  BV  |  Most  popular  3 


Handset/Dinff/Offer 


©  Retailer  Info 


t  Mobile  gi  700     Unlimited  FREE        18      £35     om  stop 

(Black)  Anytime  Months 

CombiG135(18m)  nj,  - 


Tab  top  filter  options-  Omio 


Where  You  Spend 


You've  filtered  everything  out! 
Try  broadening  your  search: 

Show  all  tags  or  view  12  months 


!b  1  '08        Mar  1  '08        Apr  1  '08        May  1  '08 


Aug  1  '08        Sep  1  '08        Oct  1 


Dec  1  '08        )an  1  '09 


Provide  feedback  and  recovery 
message  when  no  results  are  found- 
Mint 
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Forms 


etftfe-Xpress- 


Enter  Your  Information  p 


Any  Form  screens  should  be  approached 
with  a  solid  understanding  of  usability  and 
design  best  practices.  Refer  to  "Web 
Form  Design:  Filling  in  the  Blanks"  by 
Luke  Wroblewski  for  reference. 

Best  practices 

Use  a  one-column  left  aligned  layout 
(always!) 

Place  labels  on  the  top  or  left;  be 
consistent  through  the  entire  product. 

Left  align  the  command  button. 

Group  related  fields  with  subtle  shading. 

Clearly  mark  required  fields. 

Provide  clear  feedback  for  actions. 

Provide  clear  error  messages  and  help. 
Refer  to  "Defensive  Design  for  the  Web" 
by  37signals. 


NtKMd  if  mei  in  o  jtaom  itxxjt  your  wot* 


Single  column  layout-  eBay 


7 'J  fit 


**** 

©  ma   C  *asu   0  am 

MM 

r-r 

1  

Grouped  fields  w/  thin  rule,  light 
background 


E-mail  type: 


O  set  as  primary  E-mail  Q  set  as  primary  E-mail  Q  set  as  primary  E-mail 


(J  se:  as  primary  phone 


O  set  as  primary  phone  Q  set  as  primary  phone 


Address: 
City 

State/Province: 
Zip/Postal  code: 

Address  type: 


© 


• 

O  set  as  primary  address  Q  set  as  primary  address  Q  set  as  primary  addre; 


Save  Cancel 


Wroblewski,  Luke.  2008.  Web  Form  Design: 
Filling  In  the  Blanks.  New  York:  Rosenfeld  Media 


Single  form  for  entering  an  viewing 
multiple  sets  of  contact  information- 
Leukemia  &  Lymphoma  Society 
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Forms  (cont.) 


Billing  Address: 


First  Name 


Address 


Town/City 


Country 
US 

Daytime  Phone 
Evening  Phone 


last  Nome 


State  Zip  Code 


Ext. 


Top  labels-  Apple 


Research 


Eye-tracking 
image,  heat 
map.  Use  left 
aligned 
command 
button. 


Advantage: 

Adjacent  Label  and  corresponding  Input  field 


Advantage: 

Rapid  Processing 


|--  Select  value  -- 
Even  Longer  Label 


One  More  Label 
®  Value  1 
O  Value  2 


Disadvantage: 

Increased  vertical  space 


p, 


Advantage: 

Adjacent  Label  and  corresponding  Input  field 


Disadvantage: 

Reduced  readability 


Longer  Label    |..  Select  Value  •- 


Even  Longer  Label  |~ 

One  More  Label    <•>  Value  1 
O  Value  2 


Advantage: 

Reduced  vertical 
space 


Primary  Action 


C*v*oy  ! 


I       cwrr««9jr.  «« 

Qm*k*rt 


Side  labels,  right  aligned-  Linked  In 


Pay  with  Two  Credit  Cards 
Card  #1  Details 


'•  *SA 


Card  #1  Amount 


charge  to  this  card 


October  (10)      T)   2010  T)  What  is 


^  Save  this  credit  card  information 
Card  #2  Details 


Card  #2  Amount 


charged  to  this  card 


Expiration  Date 


January  (01)        :  I   2008    :  ] 


Good  error  message-  Apple 


Wroblewski,  Luke.  2008.  Web  Form  Design: 
Filling  In  the  Blanks.  New  York:  Rosenfeld  Media 
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Palette/  Canvas 


The  Palette/  Canvas  screen  pattern  is 
seldom  the  right  pattern  to  apply,  but  it  is 
the  only  pattern  for  documenting  or 
creating: 

linear  or  non-liner  processes 
flow  diagrams 
screen  layouts 

any  design/diagram  with  physical 
size  constraints 


o 
o 
o 
o 


Floating  palettes  and  toolbars-  Sprout 


Best  practices 


/ec  Single  Line  Text      123  Number 


Multiple  Choice  |  Drop  Down 
Section  Break  „  File  Upload 


«-  No  Fields!  You  should  add  a  field. 

This  is  a  live  preview  of  your  form.  Currently,  you  don't  have  any 

inputs  for  your  form.  Click  on  the  fields  to  change  their  properties. 


Provide  a  clear  "blank  state"  message  for 
getting  started. 


Fixed  palette-  Wufoo 


Include  templates. 

Create  a  dock-able  object  palette. 

Organize  objects  in  the  palette  by  type, 
most  used  should  be  always  visible. 

Offer  a  grid  option  visible  and  for  "snap 
to". 

Provide  undo  and  redo  functionality. 


■A 
Merillat 


Catatog 

»  Classic  Sna'e  Cabinets 
+  Catoiet  Styles 

{  Countertop 

+  Furniture  &  Accessories 


Provide  a  project  management  space  for 
canvases  (so  canvases  can  be  grouped, 
copied,  edited,  deleted..). 


Catalog  selection  (top)  drives  palette 
options  (below)  -  Merillat 
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Complex  palette/canvas  application- 
Wave  maker 


<£>gliffyOnline- 

yo)oj£j/JXJ  Modify  yjjrj  view  Rjij|*J*J5J  CTii^           £~  ~Z*H 
Campaigns  |   Constituents   ]      TBD      |      TBD  | 

Aog 

ggo 

111) 

Accordion  palette,  resizable-  Gliffy 


Simple  palette  with  fly-out  options- 
Lego  Mindstorms 
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Dashboard 


Dashboards  are  a  grossly  abused  screen 
pattern.  A  good  dashboard  will  provide: 

o    key  information  at  a  glance 

o    real  time  data 

o    easy  to  read  graphics 

o    clear  entry  points  for  exploration 

This  is  typically  not  achieved  by 
displaying  a  single  screen  of  metrics 
(either  in  a  big  table,  or  just  a  bunch  of 
graphs). 

Providing  a  high  degree  of  customization 
is  no  substitute  for  user  research  and 
testing. 

Design  Best  Practices 

1 .  Chose  data  to  be  displayed 

2.  Confirm  with  actual  users 

3.  Get  rid  of  half  of  it 

4.  Reconfirm  remaining  elements  with 
users 

5.  Chose  components  and  layout, 
create  3-4  variations  to  test 

6.  Revise  completely-  nothing  is 
sacred  but  the  data 


http://www.anychart.com/products/anychart/docs/ 
users-guide/dashboard-creation-tutorial. html 


Succinct  display  of  key  metrics  - 
Clearspace 


©  TIB  GMAP  Performance  Management  Dashboard 


Fully  evolved  dashboard  for  showing 
how  tax  dollars  are  used- 
Washington  State  Transportation 
Improvement  Board 


►  £3  Credit  cards  -$2,287  0 


YOUR  BUDGET 


NET  SM2  ^  A 

All  Offers  Checking  Savings  Credit  Cards 

Net  Income  July-December  Jsi Found  $51  Found 


Key  metrics,  as  well  as  high  level 
goals  clearly  displayed-  Mint 
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FiveRuns  Corporation 

Until  acknowledged:  31 

6 
6 

O  Linux 

2 
2 
o 

Troubleshool 

Red,  yellow  and  green  shows  system 
administrators  exactly  where  the 
problems  are-  FiveRuns 


eyeblaster^D  imii  upd"t,>:1 4 1 0) 


11  '*",' 


Red  highlights  the  account  managers  to 
the  underperforming  campaigns- 
Campaign  Monitor 


Customer  specific  dashboard-  would 
be  even  better  with  a  roll-up  view- 
FaceOut 
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Spreadsheet 





My  Library 


The  Spreadsheet  screen  pattern  is  ideal 
for  creating  an  efficient  user  experience  by 
allowing  the  user  to  easily  scan,  edit  and 
enter  information  (in  bulk). 

The  Spreadsheet  should  provide  the 
following  functionality: 
o    standard  table  features  like  sort, 
hide/show  columns,  rearrange 
columns,  group  by  (if  applicable) 
global  level  undo/redo 
add,  insert,  delete  row 
keyboard  navigation 
import  and  export 


o 
o 
o 
o 


Best  practices 

Visually  differentiate  between  editable 
tables  (no  zebra  stripes)  and  read-only 
tables  (use  zebra  stripes)  in  the  product. 

Indicate  which  columns  are  editable, 
calculated,  and/or  required. 

Don't  overload  rows  or  cells  with 
interaction-  one  click  for  edit  is  all  you  get. 

Hide  the  cell  editors  until  the  row  or  cell  is 
selected. 


My  current  device  is:    imac  g5  

My  preferred  audio  format  for  this  device  is:  O  Edit  devices 
Leam  more  about  devices  &  sound  compression  format. 


Program  Type:  All  Program  Types  ~i] 
Purchased  within  the: '  All 

Show     20  items  per  page    i  } 


Search  MyLibrary: 


All  I  AH  |  t-P  |  Q-Z  l» 


1  2  3  4  5  NextP 


Size  loaded 


American  Gods  (Unabridged), 


7     4  /  104  MB  iT)  \/ 


Inline  editing-  Audible 


Urgency 

Date 

Time 

Title 

cn 

31/12/2006 

09:35:47  AM 

The  internet  is  broken 

lxi 

31/12/2006 

09:35:47  AM 

The  Internet  is  broken 

26/07/2006  (OK)Cfln££j 

03:09:00  PM 

My  cup  holder  is  not  working 

m 

17/07/2006 

04:21:24  PM 

Blank  Screen 

17/07/2006 

04:21:24  PM 

31a  nk  Screen 

06/07/2006 

04:12:16  PM 

I  cant  print 

en 

06/07/2006 

04:12:16  PM 

I  cant  print 

cn 

06/07/2006 

15:06:10 

Should  I  open  this  email' 

cn 

06/07/2006 

15:06:10 

Should  I  open  this  email' 

06/07/2006 

03:04:34  PM 

The  ring  came  off  my  pudding  can 

- 

Cell  level  inline  editing,  good  for 
tweaking,  not  heavy  data  entry- 
TableKit 


<S&  Add  Grade  Column        Add  Calculated  Column        V  Manage  Email       ffl  Reports    2£  Grade  H 

Cmient  View:  Full  Grade  Center      SdasOefauil      Sort  Columns  By:  Layout  Position 


- 

laslNamc             lust  Name             Hlackboard  Sui 

Blackboard  We* 

1  mat  Paper 

r 

C  hurt  hill 

'  Hide  Column 

TOO  00 

100  00 

r 

Connery 

cisi*  Mem  1 

000 

r 

Cooper 

Alice 

1  E 

fcoo 

8500 

r 

davmcl 

Leonardo 

§200 

92  00 

r 

Faulkner 

47  50 

7900 

12650 

r 

Flrmore 

Millard 

✓ 

47  50 

■ 

47  50 

r 

Franktm 

8100 

8100 

r 

Frost 

Robert 

0  00 

r 

OandN 

Indira 

a 

000 

Row  editing,  custom  editors- 
Blackboard  Sciences 


Provide  error  messages  upon  saving,  not 
at  a  cell  level. 
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Spreadsheet  (cont.) 





Constituents 

c»                 O     5  5  5  -  »  "  -  ~    """"^    '  ^ 

Name                  ▼     Chapter  Office  Camp 

£     Danyell  Doone          Red  Wood  Wine  Ctry  Event 
£            C  unVJS            Greater  San  Francis  Event 

ign  Role         Team  Event 

artjeipant        East  Bay  Run  Team       Disney  Marathon 

■vent  Role        Pricepolnt      Event  Status 

articipant        Standard  Registered 
artcipant        Standard  Registered 

•     Pnvate  Hudson          Red  Wood  Wine  Ctry  Event 

£    Amber  Melvin          Red  Wood  Wine  Ctry  Event 
£    Jennifer  Mull             Red  Wood  Wine  Coy  Event 

articipant        East  Bay  Run  Team       Country  Music  Marathon 
artcipant        East  Bay  Run  Team        Disney  Marathon 
East  Bay  Run  Team       Disney  Marathon 

artjeipant       Red  Wood  Run          Wildflower  Marathon 

upport  Staff 

articipant        Standard  Registered 

i     Andrew  Needlem       Red  Wood  Wine  Ctry  Event 
«          dl  Rhodes          Greater  San  Francisco  Event 

^              ^mpson         Greater  San  Francisco  Event 

articipant        Discount  Registered 
articipant        Standard  Dropped 
articipant        Discount  Registered 

a    Fred  Thompson        Greater  San  Francisco     Event  Participant        East  Bay  Run  Team       Jamba  Juice  Marathon 

articipant        Discount  Dropped 
articipant        Standard  Registered 

£     Kevin  Ty                  Greater  San  Francisco      Mentor                    East  Bay  Run  Team        Country  Music  Marathon 
£     Lawrence  Utts          Greater  San  Francisco     Event  Participant        Tri  Team                  Lavaman  Tnathlon 

upport  Staff 

articipant        Standard  Dropped 
articipant         Discount  Registered 

Editable  table  provides  easy  data 
entry,  tab  for  a  new  row-  Leukemia  & 
Lymphoma  Society 


mi 

■ 

m  '■  i 

a\  •  •»' 

4  FOOD 
•  or*« 

MWIOOO 

fx-  -i 
T  •« -** 

.  nw.i. 

Meatkllt 

*  *  1 

*  *  1 

I  * 

tfOlrjOOi 

r  ;m 

L//fra  r/c/7  ce//  editing,  simple  and 
advanced-  Blist 


Ed     S>    <S    1     b    V    U     »    1    »    •    9    1    abc    abc    1    X  ^ 

a+  .-   1    I"     1     $     7    #     ~     1    zl    aI    1    »   H    I           T    '     1    cells v    |  spreadsheets 

BIO  rV 

B 

C 

E 

F 

G 

X 

Mv  Machine 

S'S" 

37  y.o. 

Start  Weight: 
220 

2 

Date 

Weight 

Total  Lost 

To  Goal  (150) 

x=no  weight 

3 

4/9/2006 

220 

0 

0 

70 

4 

4/16/2006 

220 

0 

0 

70 

4/23/2006 

217 

3 

3 

67 

6 

4/30/2006 

215 

2 

5 

65 

5/7/2006 

8 

5/14/2006 

9 

5/  2  1/2  0  06 

10 

5/2  8/2  006 

1 

5 

10 

60 

11 

6/4/2006 

2CS 

2 

12 

58 

12 

6/11/2006 

210 

0 

lO 

60 

Excel  style  interface  for  building  a  fully 
functional  spreadsheet-  NumSum 
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Wizard/  Quick  Start 


— o — © — ©- 

Next> 


The  Wizard/Quick  Start  screen  pattern  is 
ideal  for  creating  an  efficient  user 
experience  by  guiding  the  user  through  a 
complex  or  infrequent  workflow. 


Best  practices 

Keep  the  number  of  steps  to  a  minimum. 

If  there  are  more  than  5  steps,  group  them 
at  a  task  level  and  don't  number  them  (like 
Amazon's  shopping  cart). 


Company  Name 

Quick  Set  Up  yuidi  .  i  through  the  installati 

1    STEP  ONE 

2    STEP  TWO                                             3    STEP  THREE 

_  Download 
*  &  Install 

O  Or  download  the  software  for  offline 

O  Select  Systems                     <fe  Organize 
to  Manage                            A  Using  Croups 

O  Select  which  of  Vour  systems  and 

subsystems  to  manage                                      O  Create  your  own  custom  groups  to 

O  Enter  user  credentials  for  these  logically 

Get  Started 

Quick  Set  Up,  a  one  time  process- 
FiveRuns 


<]  setup  your 
U  business 

m  m  fe-  »  ®  • 

QUICK  START       INFORMATION           TOUR            YOUR  VIRTUAL            YOUR             SeTUP  TOUR 
SECTION          MANAGEMENT       COMPUTER              TEAM             SALES  PLAN  REMINDERS 

3)  target  your 
market 

EH 

a  t  q  m  ©  & 

SETUP  TOUR              TOUR                TOUR  HOT          TOUR  HUNGRY        12  PRODUCT  TARGETED 
SPREADSHEET        BREAKEVEN           PRODUCT        TARGET  MARKET          SURVET  MEDIA 

setup  sales 
process 

EH 

6      >  !3  m  " 

MERCHANT            ADD  TOUR            ADD  TOUR           TOUR  KILLER           GRAPHIC             TOUR  WEB 
ACCOUNT              DOMAIN             HOSTING          SALES  LETTER           DESIGN  SITE 

S\  setup  your 
®J  website 

EH 

J       I       ^        'J  ^ 

FTP:                WEB  STATS         TOUR  AUTO-         TOUR  STICK           SHOPPING  AFFILIATE 
FILE  TRANSFER.           TRACKING           RESPONDERS             LETTER              CART  SETUP  PROGRAM 

do  your 
promotion 

EH 

W  <a         0  V  w 

GET              CREATE  YOUR       PAY-PER-CLIOK         RSS  NEWS         TOUR  PROFIT  SPLIT 

n*rrv:         w:«*:.t;.v*       wc*»:-tk«           feec           statistics  testing 

A  maintain 
LOj  your  biz 

EH 

email          anti- virus         support          backup         free  trial  marketing 

SUPPORT           SOFTWARE         DESK  SYSTEM        YOUR  DATA          SOFTWARE  RESOURCES 

Label  the  steps  clearly,  in  the  vernacular. 

Only  use  this  pattern  for  infrequent  work- 
flows: set-up,  installation,  troubleshooting, 
filing  an  application  or  complex  forms,  or 
provide  an  opt-out  for  experienced  users. 

Show  what  step  the  user  is  currently  on, 
allow  for  "back". 


Guided  wizard  grouped  by  business 
functionality 


Quick  Setup 


Steps  with  sub-steps-  Fluid  Innovation 
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Wizard/  Quick  Start  (cont.) 


i. 


What's  New  for  You  for  2007? 


ly  Marriage  My  Family 


Choose  How  to  Enter  This  Sale 


Dmc  sate  (Box  la)  06  1  J.2O07  ] 
£lfi«£«(Box2)         |50.00  "I 

Humeri  ol  Sr,,v»  Sold     |85  ~| 

Ti.  '.Vi^it-ntMi-ir  (Box  4)  <r  Taxes  were  not 


EnM  my  twattmant  sala  Wormslion  manoaly 


Step  by  sfep  guidance-  TurboTax 


amazon.com 


GN  IN        SHIPPING  &  PAYMENT        GIFT-WRAP        PLACE  ORDER 


High  level  tasks-  no  step  numbers 
provided-  Amazon 


Select  a  Destination 


Select  the  volur 
<  I  Introduction  \  \        Update  Combm 

•  •  Destination  Select  "^^i 


Select  the  volume  where  ycxu  want  to  install  the  Mac  OS  X 
Combined  software. 


•  Install 


Macftook  Pro  MD 

121  CI  * 
J  3?  CB  t< 


|  You  cannot  Install  Mac  OS  X  Update  Combined  on  that 
"  volume  This  volume  does  not  meet  tK»  requirements  for 
th  s  update. 


(  Co  lack  )  '  Cont.nve  x 


Installation  wizard-  Mac  OS 
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Question  &  Answer 


The  Q&A  screen  pattern  is  ideal  for 
creating  an  efficient  user  experience  by 
allowing  the  user  to  enter  known 
information  and  receive  a  solution. 

Q&A  differs  from  Search  in  that  this 
pattern  should  be  used  to  assist  users  in 
identifying  possible  options  or  a  single 
recommendation  in  an  arena  they  are 
lacking  expertise  (health  insurance, 
mortgages,  planning,  purchases) 

For  example,  "I  need  to  find  the  right 
mortgage."  Unlike  booking  a  flight  from 
AUS  to  JFK  next  Friday,  when  I  look  at  the 
results  of  the  mortgage  search,  I  don't 
how  the  expertise  to  compare  the  different 
types  of  mortgages.  The  Q&A  pattern 
would  elevate  the  best  options  based  on 
the  information  I  provided  in  the  Question 
section. 

Best  practices 

Allow  the  user  to  specify  their  goals  in  the 
Question  section  (live  in  the  house  for  10+ 
years,  low  deductible  with  a  high  co-pay). 

Provide  prioritized  options  with  pros  and 
cons  outlined  in  the  Answer  section. 


S  4CO.000.00 
What  cio  you  want  lo  pay  monthly 

How  lorn;  will  you  live  there  ! 


is  your  down  payment 


Q: 

Which  loan  is  right  for  you? 

A: 

There  are  a  number  of  loans  you  can  choose  from 

15Year                                     ™8  loan  offers  the  quickest  pay  of,  but  die  highest 

Fixed           ™\  ; 

30  Year  cS^™'^S^dPM7^nd^'S 

$  400,000.00 

What  do  you  want  to  pay  monthly 
$3,800  li'i7m^nSa"d 

Fixed  Touiccrfi™- 
&  HELOC              $Mt43t.oo      ^  •HFicxiwiiiituctiamwitmnHiMt 

How  long  will  you  live  there 

30  Year                      ^  IXl^SS^fSS^I^^^^. 
Fixed  "t/S'oo" 

c^J  1    7  years 

What  is  your  down  payment 

7/1    ,  is^£&%!&x2£mtm 

ARM                T™'.oTr.«lkcS '   yfluijuonialyjaymenls  could,  increase  "See  h0W 
5/1                  Toulco.oflo.n-                      -snehc,  m,  mnnthl  imnls 

, — fj  —  ,  40,000 

3/1                                      thi           t,  ^Seatotynui 
ARM            '"'.wjli™'  ' 

Formulate  a  question,  see  the  best 
solutions-  Fidelity  Mortgage 


at  apply  and  click  submit): 


ss  against  savings  goals 


Manage  my  personal  ar 


I  want  to  (check  all  that  apply  and  click  submit): 
</  Get  started  using  Quicken  for  the  first  time 
Bring  my  accounts  together 
See  where  my  money  is  going 


Simplify  my  taxes  and  mat 
Track  progress  against  savings  gos 
Track  and  analyze  my  investments 
Manage  my  personal  and  business 


We  recommend: 


Quicken  Deluxe  2009 


Q:  "I  want..." 

A:  "you  need..."  -  Quicken 


PAYDOWN  PLANNER 


lownother      PAYDOWN  PLANNER 

fer  offer  of      Start  with  a  paydown  target  date  to  see  what  your  monthly  pi 


sAQf\  estimated  monthly  payment  needed  to  pay  down  your 
V  balance  by  November  2009 


See  Helpful  Options  to  Stay  on  Track  ■» 


Enter  your  goal,  get  a  plan-  Discover 
Paydown  Planner 
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Parallel  Panels 


Stacked 

The  Parallel  Panels  screen  pattern  can  be 
stacked  (showing  one  at  a  time)  or 
unstacked  (showing  all  at  once).  This 
pattern  is  ideal  for  organizing  chunks  of 
information  that  are  similar  or  have 
interdependent  tendencies.  Efficiency  is 
gained  by  keeping  the  user  in  one  screen. 

Ideal  candidates  for  the  stacked  variation 
of  this  pattern  are  simple  work-flows  with: 

o  a  high  level,  visible  goal  that  is  fed 
by  multiple  inputs 

o    multiple,  non-sequential  steps 

Best  practices 

Run  the  stacked  panels  down  the  left; 
show  the  goal  at  the  top,  bottom  or  right  of 
the  screen. 

Use  contrast  and  padding  to  clearly 
display  the  stacked  panels,  keep  them  off 
the  bottom  edge  of  the  screen. 

Make  the  whole  panel  clickable,  not  just 
the  label. 

Three  to  five  panels  work  best. 


Stacked  panels  keeps  the  user  in  the 
same  screen.  The  price  is  impacted  by 
entries  in  each  panel-  TheTrain.com 


Calculated  Fundraising  Mini 


Pricepoint 


□  Create  funOraising  website 
Co  xnc  its 


• 


Priceoon:  1000.00 

fee  ena-qed  50.00 

Req  tee  paid  0.00 

Olsets  200.00 

Potential  o.OO 


Sot'.  :<edi:: 


0.00 


Registration  with  multiple  sections- 
Team  in  Training 


I 


Name:  Theresa  Neil's  iPod 

Capacity:  7.27  CB 

Software  Version:  1.1.4  (with  Software  Upgrade) 

Serial  Number:  9C801DC414N 


Version 


A  newer  version  of  the  iPod  software  is  available  (version  2.2).  To  update  your 
iPod  with  the  latest  software,  click  Update. 


Update  1 


If  you  are  experiencing  problems  with  your  iPod,  you  can  restore  its  original 
settings  by  clicking  Restore. 


Options 


M  Open  iTunes  when  this  iPod  is  connected 

D  Sync  only  checked  songs  and  videos 
S  Manually  manage  music  and  videos 


Stacked  panels  displayed  as  tabs- 
iTunes  iPod  summary 
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Parallel  Panels  (cont.) 


Unstacked 

The  unstacked  version  is  appropriate  in: 
o    tools  (one  screen  apps)  that  need 

to  show  all  the  components 

comprising  the  whole 
o     dialogs-  collapsible  panels  are  often 

more  efficient  for  users  to  navigate 

than  tabs 

Best  practices 

If  the  panels  have  a  hierarchal  or 
sequential  relationship,  this  is  probably 
the  wrong  pattern.  Try  Master/Detail  or 
Wizard. 


Don't  nest  panels. 


Plan  Manager  [m    *~*i.->-~i*    »  a 


Morning,  Midday,  Evening,  and  Anytime 
panels  all  feed  into  the  days  total  points- 
Weight  Watchers  eTools 


Each  panel  impacts  the  price,  shown 
in  the  top  right-  Apple  Store 


8O0 


Move.Mortgage  Info 


Move.Mortgage 

Modified:  Apr  1.  2008  4:43  PM 


▼  General 

Kind:  Folder 

Size:  29.7  MB  on  disk  (31,051,227  bytes) 
Where:  /Users/theresaneil/Documents/macg5 
Created:  Monday,  February  11,  2008  9:08  PM 
Modified:  Tuesday.  April  1,  2008  4  43  PM 
Color  label:  [x]  •      ^  v  •  •  # 

B  Locked 
T  More  Info: 

Last  opened:  Monday,  February  11,  2008  9:08  PM 
T  Name  &  Extension: 

Move.Mortgage 

_  Hide  extension 

►  Preview: 

►  Ownership  &  Permissions: 


Tidwell,  Jennifer.  2007.  Designing  Interfaces: 
Patterns  for  Effective  Interaction  Design. 
O'Reilly. 


Collapsible  panels  can  be  used  to 
save  space-  Get  Info  on  Mac  OS 
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Interactive  Model 


myPlan  Snapshot"" 


^  Fide  lity 


The  Interactive  Model  screen  pattern  is 
characterized  by  many  interactive 
elements  associated  with  the  key  object  (a 
calendar,  map,  graph,  chart,  canvas).  It  is 
ideal  for  creating  a  user  experience  that  is 
closely  aligned  with  the  user's  mental 
model  (a  natural  fit). 

Excellent  candidates  for  this  pattern  are: 
calendars 
maps 

gantt  charts 

what-if  scenarios  (including 
calculators) 

WYSIWYG  editors  (including  photo 
editing) 


o 
o 
o 
o 

o 


Best  practices 

Allow  the  user  to  quickly  get  at  the 
interactive  object  (bulk  load,  a  few  quick 
questions,  templates,  or  reasonable 
defaults). 

Avoid  pop-ups,  allow  for  direct  interaction 
as  much  as  possible,  dragging,  resizing, 
dropping,  double  click  to  create... 


Current  age  40      Your  annual  income  $       75000     Your  savings  thus  far  $  100000 


Our  assumptions  and  methodology  ? 

Time  ? 

retirement  age  65 

e 


Money  r 

contributions  $700/mo 


Investment 


On-Track  to  Have:  On-Track  to  Have: 

$715,000  $1,846,000 

"kYour  goal  represents  assets  needed  to  replace  85%  of  vol 
methodology  The  calculator  considers  estimated  social  s< 


style  Most  Aggressive 


•■,  p., ....flit--,  hilt  nor-s  1 1 : 


Retirement  calculator-  Fidelity  MyPlan 


fiR2 
*« 

*R4 

ft« 

*R6 
*R7 

□  Task  44 

□  Task  51 


=F 


Project  planning-  Agile  Agenda 


Is  It  Better  to  Buy  or  Rent? 


Compare  the  costs  of  renting  and  Inmns  wwivalcnt  hi.mcv  flick  calculate  after  you  make  changes. 


MrtlnHliiln;^  |  Related  artii-l. 


Renting  |  Buying  | 


Move  the  sliders  to  see 
changes  in  rent  and 
prices  affect  the 


Comparison  calculator-  New  York  Times 
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Interactive  Model  (cont.) 


Create  Event                   KWMQrodavJ  May  2 

Quick  Add                                       Sun  5/20 

0  -  26  2007 

i|§   Day  Week   Month    Next  4  Days  Agenda 

S    M    T   W   T    F  S 
»  14   15   16  17  r» 

SB 

 B 

10.m 
12pm 

3pm 
4pm 

▼  Calendars 
My  Calendars  □ 

f7il!I.I..IJj,IU.!.kM  * 

Other  Calendars  □ 

3earchpUh„cca,endars 

■ 

This  WYSIWYG  editor  fits  the  Palette/ 
Canvas  pattern  as  well  as  the  Interactive 
Model-  Sprout 


i 

J 

4 

» 

• 

7 

• 

X» 

H 

il 

IS 

M 

IB 

II 

1* 

u 

H 

11 

U 

a 

M 

■ 

>  n « to  ii  i i  1 1 

l«   If   14   IT   !•  I*  10 

11 

B 

M 

E 

1 

i 

1 

11   11  11   14   21  IT 

Editable  calendar  with  filtering- 
go  WebTop  beta  by  Laszlo 
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Blank  State 


Form  Manager 


Holy  tabula  rasa!  You  don't  have  any  forms!  Let's  go  make  one! 

You  have  unlimited  forms  left.  (Upgrade) 


Form  manager  is  easy  to  start  using 
with  an  engaging  blank  state-  Wufoo 


Files  for  this  project 


Upload  the  first  file  to  this  project 

Upload,  download,  and  share  files  related  to  this  project. 


O  Upload  a  fil 

File  storage  sp 


Click  me  to  start  the  video 


Message  and  hyperlink  helps  users  get 
started  using  the  features  in  Bascamp  by 
37signals 


Add  a  new  List  Npje  Fije  Picture  gallery  WriKfroard.  Link  Separator  or 

A  new  page 

Use  these  links  to  fill  your  page. 

S^arc  th'i  Mq<  frTnii  a  copy  pypiicaft  to^m  from  i«itbv  Pt'fle,  frit  ma* 

Send  email  to  this  page  sgmeaddrqss^ackpaclat.cgm  Renew  address 


Hejfi   Text  Formatting   We^gg   Fgrym   Privacy  Pglicy   Terms  gf  Service 


An  arrow  directs  the  eye  to  the  starting 
spot-  Whiteboard  by  37signals 


Getting  Real  by  37Signals 
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